import React, { Component } from "react";
import { Form, Input, InputNumber, Select, Space, Button, Radio } from "antd";
import GoBack from '@/components/TheGoBack';
import TheUpload from "@/components/TheUpload";
import {
    apiPetSceneInfoAddOrEdit,
    apiGetPetSceneInfoDetail,
    apiGetPetSceneClassifyList
} from '@/request/sceneTool'

const { Option } = Select
const { TextArea } = Input;
class Add extends Component {
    constructor(props) {
        super(props);
        this.state = {
            btnLoading: false,
            title: '',
            fileList: [],
            options: []
        }
    }
    componentDidMount() {
        if(this.props.match.params.id === 'null'){
            this.setState({
                title: "新建食品"
            })
        }
        else {
            this.setState({
                title: "编辑食品"
            })
            this.detail(this.props.match.params.id)
        }
        this.getList()
    }
    detail = async (id)=>{
        await apiGetPetSceneInfoDetail({sceneId:id}).then(res=>{
            if (res.code === 0) {
                this.formRef.setFieldsValue(res.data)
                this.setState({
                    fileList:[{
                        uid: '-1',
                        name: 'image.png',
                        status: 'done',
                        url: res.data.sceneFile,
                    }]
                })
            }
        })
    }
    getList= async()=>{
        await apiGetPetSceneClassifyList({ platformSetUseValue: 'EAT' }).then(res=>{
            if (res.code === 0){
                this.setState({
                    options: res.data
                })
            }
        })
    }
    onFinish= async (values)=>{
        this.setState({btnLoading: true})
        if (this.props.match.params.id !== 'null'){
            values.sceneId = this.props.match.params.id
        }
        values.platformSetUseValue = 'EAT'
        await apiPetSceneInfoAddOrEdit(values).then(res=>{
            if (res.code === 0) {
                React.$message({
                    type: 'success',
                    content: '操作成功'
                })
                this.props.history.goBack()
            } else {
                this.setState({btnLoading: false})
            }
        })
    }
    // 图片上传回调;
    getDetailsFileResult = (value) => {
        if (value && value.length) {
            let arr = value
                .map((v) => {
                    if (v.response && v.response.code === 0) {
                        return v.response.data;
                    } else {
                        return v.url;
                    }
                })
                .join(",");
            this.formRef.setFieldsValue({
                sceneFile: arr,
            });
        } else {
            this.formRef.setFieldsValue({
                sceneFile: "",
            });
        }
    };
    render() {
        const { title,btnLoading,fileList,options } = this.state

        return (
            <div className="p-layout-box">
                <GoBack history={this.props.history} title={title} />
                <div className="p-layout-content">
                    <Form
                        labelCol={{ span: 3 }}
                        wrapperCol={{ span: 8 }}
                        onFinish={this.onFinish}
                        initialValues={{
                            "radio-group":'b'
                        }}
                        ref={ref => this.formRef = ref}
                    >
                        <Form.Item rules={[{ required: true, message: '请选择' }]} label="分类" name="sceneClassifyId">
                            <Select options={options} fieldNames={{label: "sceneClassifyName", value: "sceneClassifyId"}}>
                            </Select>
                        </Form.Item>
                        <Form.Item rules={[{required: true}]} label="食物名称" name="sceneName">
                            <Input maxLength={5} placeholder={"最多可填写5个字"}/>
                        </Form.Item>
                        <Form.Item
                            label="上传图片"
                            name="sceneFile"
                            rules={[{ required: true }]}
                        >
                            <TheUpload
                                fileType={"image"}
                                maxSize={10}
                                fileList={fileList}
                                getFileResult={this.getDetailsFileResult}
                                len={1}
                            />
                        </Form.Item>
                        <Form.Item rules={[{required: true}]} label="能不能吃" style={{marginBottom:0}}>
                            <Form.Item rules={[{required: true}]} label="猫" name={"cat"}>
                                <Select style={{width:200}}>
                                    <Option value={0}>可吃</Option>
                                    <Option value={1}>禁吃</Option>
                                </Select>
                            </Form.Item>
                            <Form.Item rules={[{required: true}]} label="狗" name={"dog"}>
                                <Select style={{width:200}}>
                                    <Option value={0}>可吃</Option>
                                    <Option value={1}>禁吃</Option>
                                </Select>
                            </Form.Item>
                        </Form.Item>
                        <Form.Item rules={[{required: true}]} label="管家提醒" name="remind">
                            <TextArea rows={4} maxLength={300} showCount/>
                        </Form.Item>
                        <Form.Item rules={[{required: true, message: '请输入正确的排序数字。' }]} label="排序" name="sorted">
                            <InputNumber min={1} precision={0}/>
                        </Form.Item>
                        <Form.Item
                            wrapperCol={{
                                offset: 3,
                                span: 10,
                            }}
                        >
                            <Space>
                                <Button onClick={() => this.props.history.goBack()}>取消</Button>
                                <Button loading={btnLoading} htmlType="submit" type="primary">保存</Button>
                            </Space>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        );
    }
}

export default Add;
